// sourceMap: true
@media screen and (min-width: 1280px) {
    .container {
        width: 1280px;
    }
}

body {
    background-color: #eeeeee;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

// .container {
//     height: 200px;
//     background-color: #0a0;
// }

header {
    .logo {
        margin: 0;

        a {
            display: block;
            background-color: #ff5e52;
            text-align: center;

            img {
                max-width: 100%;
            }
        }

    }

    .nav {
        a {
            background-color: #eeeeee;
            color: #444444;
            background-color: #fff;
        }
    }
}

article {
    .pic {
        display: flex;
        padding-bottom: 10px;
        justify-content: space-between;
        border-bottom: 1px solid #ccc;

        .pic_left,
        .pic_right {
            width: calc(50% - 5px);
            height: 266px;
            // background-color: #0a0;
        }

        .pic_left {
            img {
                width: 100%;
                height: 100%;
            }
        }

        .pic_right {
            ul {
                display: flex;
                height: 266px;
                flex-wrap: wrap;
                justify-content: space-between;
                align-content: space-between;

                li {
                    width: calc(50% - 5px);
                    height: 128px;
                    // background-color: #6cf;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }
    }

    .news {
        li {
            border-bottom: 1px solid #ccc;

            h3 {
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }
        }

        .news_pic {
            padding: 10px;

            img {
                width: 100%;
                height: 100%;
            }
        }
    }
}

aside {
    .slogan {
        img {
            width: 100%;
        }
    }

    .hot {
        margin-top: 20px;
        padding: 0 20px;
        border: 1px solid #ccc;

        .search {
            border-radius: 0;
            margin-bottom: 10px;
        }

        p {
            font-size: 12px;
        }
    }
}

@media screen and (max-width: 991px) {
    header .nav {
        display: flex;

        li {
            flex: 1;
            text-align: center;
        }
    }


}

@media screen and (max-width: 767px) {
    header .logo a {
        height: 50px;
        line-height: 50px;
        color: #fff;
        font-size: 14px;
    }

    article .pic .pic_right {
        width: 100%;
    }



    header .nav a {
        padding-left: 0;
        padding-right: 0;
    }

    .nav i {
        display: none;

    }

    .news {
        h3 {
            font-size: 14px;
        }
    }
}